<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <button @click="btnclick1">动起来</button>
       <button @click="btnclick2">别动了</button>

        <h2>{{message}}</h2>
    </div>
    <script src="vue/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                message:'Hellow World!',
                msg:true,
                interval:null
            },
            methods:{
                btnclick1(){
                    if(this.msg){
                        this.interval=setInterval(() => {var star=this.message.substring(0,1)
                        var end=this.message.substring(1)
                        this.message= end + star},400)
                    }    
                    this.msg=false                                  
                },
                btnclick2(){
                    clearInterval(this.interval)
                    this.msg=true
                }
                
            },
            computed:{},
            components:{}
        });
    </script>
</body>
</html>